<template>
  <view class="select-container">
    <navbar title="选择城市"></navbar>
    <view class="TOP"></view>
    <view class="label">选择城市</view>
    <view class="city-block" @click="select(location)">{{ location.name }}</view>
    <view class="label">热门城市</view>
    <view class="hot-container">
      <view class="city-block" v-for="city in hot" :key="city.code" @click="select(city)">{{ city.name }}</view>
    </view>
    <view class="city-group" v-for="(list, first) in citys" :key="first">
      <view :class="['first-char', first.toUpperCase()]">{{ first.toUpperCase() }}</view>
      <view class="row" v-for="city in list" :key="city.code" @click="select(city)">
        {{ city.name }}
      </view>
    </view>
    <view class="first-char-container" :style="{paddingTop: (topBar.statusBarHeight + topBar.navbarHeight + 20)+'px'}">
      <view class="item" @click="pageScrollTo('top')">#</view>
      <view class="item" v-for="(list, first) in citys" :key="first" @click="pageScrollTo(first)">
        {{ first.toUpperCase() }}
      </view>
    </view>
  </view>
</template>

<script>
import {commonApi} from "@/api";
import navbar from "@/components/navbar.vue";
import utils from "@/libs/utils";
import {mapGetters, mapActions} from 'vuex'
import Storage from "@/libs/Storage";

export default {
  components: {
    navbar
  },
  data() {
    return {
      hot: [],
      citys: {},
      local: null,
      type: null,
      status: 0
    }
  },
  async onLoad({type}) {
    this.type = type
    const res = await commonApi.citys()
    this.hot = res.data.data.hot
    this.citys = res.data.data.map
  },

  computed: {
    ...mapGetters(['location', 'topBar']),
    statusStr() {
      if (this.status === 0) {
        return '定位中'
      }
      if (this.status === 1) {
        return this.local.name
      }

      return '定位失败'
    }
  },
  methods: {
    ...mapActions(['setSelectedLocation']),
    async getLocation() {
      try {
        const res = await utils.getLocation()
        const {latitude, longitude} = res
        await commonApi.locationToCity(latitude, longitude)

        let city;
        if (res.city) {
          city = res.city
        } else if (res.address) {
          city = res.address.city
        } else {
        }
        if (city) {
          city = city.replace('市', '').replace('区', '').replace('县', '')
          let selected
          Object.values(this.citys).find(list => {
            // console.log(list)
            selected = list.find(item => {
              return item.name === city
            })

            if (selected) {
              return true
            }
          })

          if (selected) {
            this.status = 1
            this.local = selected
          }
        } else {
          this.status = -1
        }
      } catch (e) {
        console.log('error', e)
        this.status = -1
      }
    },
    pageScrollTo(first) {
      uni.pageScrollTo({
        duration: 200,
        selector: '.' + first.toUpperCase(),
        success(res) {
          console.log(`pageScrollTo调用成功`, res);
        },
        fail(err) {
          console.log(`pageScrollTo调用失败`, err);
        },
      });
    },
    select(city) {
      if (!city) {
        return
      }
      if (this.type === 'return') {
        uni.$emit('select_local',{city})
      } else {
        this.setSelectedLocation({city})
        Storage.set('location', city)
        console.log('select city', city)
      }
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.hot-container {
  display: flex;
  flex-wrap: wrap;
}

.select-container {
  background-color: #fff;

  .label {
    font-size: 16px;
    margin-left: 30rpx;
    font-weight: bold;
    margin-top: 30rpx;
  }

  .first-char-container {
    background-color: #fff;
    width: 60rpx;
    position: fixed;
    right: 0;
    top: 0;
    padding-top: 100rpx;
    bottom: 0;

    .item {
      text-align: center;
      height: 50rpx;
      font-size: 12px;
    }
  }

  .TOP {
    height: 1px;
  }

  .city-block {
    width: 200rpx;
    height: 80rpx;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-left: 30rpx;
    margin-top: 30rpx;
    color: #999;
  }

  .city-group {
    color: #000;

    .first-char {
      display: flex;
      align-items: center;
      height: 80rpx;
      padding-left: 30rpx;
    }

    .row {
      height: 80rpx;
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      background-color: #f7f7f7;
      border-bottom: 1px solid #eee;
    }
  }
}

</style>
